<template>
  <div class=''>
    <el-container style="height: 100vh">
      <el-menu :router="isRouter" default-active="/home" class="el-menu-vertical-demo" background-color="#545c64"
        text-color="#fff" active-text-color="#fff" :collapse="isCollapse" @select="handleSelect">
        <el-image style="width: 180px; height: 125px;margin: 10px 10px;margin-bottom: 0;"
          src="http://192.168.22.1:5003/uploads/logo.png" fit="fill" v-if="!isCollapse" lazy></el-image>
        <el-menu-item index="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/user"
          v-if="completeUserInfo.UserBasicDto.type === 3 || completeUserInfo.UserBasicDto.type === 4">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/category">
          <i class="el-icon-files"></i>
          <span slot="title">分类管理</span>
        </el-menu-item>
        <el-menu-item index="/dish">
          <i class="el-icon-food"></i>
          <span slot="title">菜品管理</span>
        </el-menu-item>
        <el-menu-item index="/setmeal">
          <i class="el-icon-dish"></i>
          <span slot="title">套餐管理</span>
        </el-menu-item>
        <el-menu-item index="/order">
          <i class="el-icon-document"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <el-menu-item index="/record" v-if="completeUserInfo.UserBasicDto.type === 4">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">日志管理</span>
        </el-menu-item>
      </el-menu>
      <el-container style="height: 100vh">
        <el-header style="height: 58px">
          <div @click="changeStatus" style="margin: 20px">
            <i class="el-icon-s-fold" v-if="!isCollapse"></i>
            <i class="el-icon-s-unfold" v-else></i>
          </div>
          <div style="margin: 20px 0;width: 100px;font-size: 14px;" v-if="isCollapse">
            {{ routerName }}
          </div>
          <div class="userInfo">
            <div class="time"></div>
            <div class="userImage">
              <el-avatar icon="el-icon-user-solid" :src="image" :fit="fit"></el-avatar>
            </div>
            <div class="userTitle">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ completeUserInfo.UserBasicDto.username }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <!-- <el-dropdown-item command="a"><i class="
                    el-icon-user"></i>个人信息</el-dropdown-item> -->
                  <el-dropdown-item command="b"><i class="
                    el-icon-lock"></i>修改密码</el-dropdown-item>
                  <el-dropdown-item command="c" divided><i class="
el-icon-switch-button"></i>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="修改密码" :visible.sync="updatePassword" width="35%">
      <el-form ref="form" :model="pwdObject" label-width="80px" :rules="passwordRules" label-position="left" style="margin: 20px 40px;">
        <el-form-item label="旧密码:" prop="oldPwd">
          <el-input v-model="pwdObject.oldPwd" style="width: 280px;" placeholder="请输入旧密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newPwd">
          <el-input v-model="pwdObject.newPwd" style="width: 280px;" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <div style="margin-top: 40px"></div>
        <el-form-item>
          <el-button type="primary" @click="editPassword">保存</el-button>
          <el-button style="margin-left: 80px;" @click="updatePassword = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'

export default {
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      baseUser: '/user-basic',
      baseUserInfo: '/user-info',
      fit: 'fill',
      completeUserInfo: {
        UserBasicDto: {},
        userInfo: {
        }
      },
      image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      routerList: [
        { index: '/home', name: '首页' },
        { index: '/user', name: '用户管理' },
        { index: '/category', name: '分类管理' },
        { index: '/dish', name: '菜品管理' },
        { index: '/setmeal', name: '套餐管理' },
        { index: '/order', name: '订单管理' },
        { index: '/record', name: '日志管理' }
      ],
      isCollapse: false,
      isRouter: true,
      routerName: '首页',
      updatePassword: false,
      pwdObject: {
        oldPwd: '',
        newPwd: ''
      },
      passwordRules: {
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ]
      },
      currentDate: new Date().toLocaleTimeString()
    }
  },
  // 监听属性 类似于data概念
  computed: {
    isLogin () {
      return this.$store.getters.token
    },
    userId () {
      return this.$store.getters.userId
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getTimesInterval () {
      this.currentDate = new Date().toLocaleTimeString()
    },
    getTimes () {
      setInterval(this.getTimesInterval, 1000)
    },
    // 回显个人信息
    async getInfo () {
      await request({
        url: this.baseUserInfo + '/user-info',
        method: 'get'
      }).then(res => {
        this.completeUserInfo.userInfo = res.data.data
      })
    },
    // 回显个人完整信息
    async getCompleteUserInfo (id) {
      const userBasic = await request({
        url: this.baseUser + `/user-basic/${id}`,
        method: 'get'
      })
      this.completeUserInfo.UserBasicDto = userBasic.data.data
      await this.getInfo()
    },
    // 退出登录
    logout () {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$store.dispatch('user/logout')
        this.$router.push({
          path: '/login'
        })
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
      }).catch(err => {
        console.log(err)
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
      })
    },
    handleCommand (command) {
      if (command === 'a') {
        // 个人信息
        // this.goUserInfo()
      } else if (command === 'b') {
        // 修改密码
        this.updatePassword = true
      } else if (command === 'c') {
        // 退出登录
        this.logout()
      }
    },
    changeStatus () {
      this.isCollapse = !this.isCollapse
    },
    handleSelect (index) {
      this.routerList.forEach(item => {
        if (item.index === index) {
          this.routerName = item.name
        }
      })
    },
    // 修改密码
    async editPassword () {
      const res = await request({
        url: '/user-basic/login/true',
        method: 'post',
        data: {
          loginAccount: this.completeUserInfo.UserBasicDto.loginAccount,
          password: this.pwdObject.oldPwd
        }
      })
      if (res.data.data) {
        await request({
          url: this.baseUser + '/user-basic',
          method: 'put',
          data: {
            id: this.userId,
            password: this.pwdObject.newPwd
          }
        }).then(res => {
          if (res.data.data) {
            this.updatePassword = false
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        })
      }
    },
    // 个人信息
    async goUserInfo () {
      // 跳转到个人信息
      this.$router.push({
        name: 'UserInfo',
        params: {
          id: this.userId
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    if (this.isLogin) {
      this.getCompleteUserInfo(this.userId)
    }
    this.getTimes()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {
    if (this.currentDate) {
      clearInterval(this.getTimesInterval)
    }
  }, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.el-header {
  background-color: #33cc99;
}

.el-aside {
  background-color: #545c64;
    text-align: center;
}

.el-main {
    background-color: #F5F5F5;
}

.el-aside div.logo {
  box-sizing: border-box;
  height: 135px;
}

li {
  list-style: none;
}

ul .menu-item {
    padding-bottom: 20px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
}
ul .menu-item .menu-link span{
    color: #b1b2b5;
    border-radius: 10px;
}

ul .menu-item li:hover span{
    color: #fff;
    border-radius: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: black;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-header {
  display: flex;
}

.userInfo {
  display: flex;
  width: 200px;
  margin-top: 8px;
  height: 50px;
  right: 5%;
  position: absolute;

  .time {
    margin-top: 10px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 13px;
  }

  .userImg {
    margin-top: 3px;
    width: 50px;
    height: 50px;
  }

  .userTitle {
    margin-left: 6px;
    width: 100px;
    height: 50px;
    line-height: 50px;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

</style>
